<template>
  <div class="singer-container">
    <!-- 歌手信息区域 -->
    <div class="singer-info">
      <div class="singer-left">
        <image-preview :src="this.$route.query.imgUrl" />
      </div>

      <div class="singer-right">
        <h1 class="singer-title">{{ singerInfo.singerName }}</h1>
        <!-- 公司 -->
        <div class="singer-singer">公司：{{ singerInfo.company }}</div>
        <div class="singer-singer">简介：{{ singerInfo.description }}</div>
        <!-- 发行时间 -->
        <div class="singer-singer">出生时间：{{ singerInfo.birthDate }}</div>
        <div class="singer-actions">
          <el-button type="primary" icon="el-icon-video-play" @click="playAll">
            播放全部</el-button
          >
        </div>
      </div>
    </div>
    <div class="song-list">
      <el-table :data="songList" style="width: 100%">
        <el-table-column prop="songName" label="歌曲" />
        <el-table-column prop="singer" label="歌手" />
        <el-table-column label="图片" align="center" prop="imgUrl" width="200">
          <template slot-scope="scope">
            <image-preview :src="scope.row.imgUrl" :width="80" :height="80" />
          </template>
        </el-table-column>
        <!-- <el-table-column prop="fileUrl" label="音乐文件路径" width="200" /> -->
        <el-table-column prop="releaseDate" label="发行时间" />
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-video-play"
              @click="handlePlay(scope.row)"
              >播放</el-button
            >
            <el-button size="mini" type="text" icon="el-icon-download"
              ><a :href="scope.row.fileUrl" download>下载</a></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getSinger } from "@/api/singer/singer";
import { getSongListBySingerId } from "@/api/song/song";
import { addHistory } from "@/api/history/history";
export default {
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/api/music/upload",
      singerInfo: {
        coverUrl: "",
        song_name: "",
        singer: "",
        releaseDate: "",
        description: "",
      },
      songList: [],
    };
  },
  methods: {
    // 播放全部
    playAll() {
      //提取songList中的songId
      const songIds = this.songList.map((item) => item.songId);
      const currentSongIndex = 0;
      this.$router.push({
        path: "/player",
        query: {
          currentSongIndex: currentSongIndex,
          songIds: songIds,
        },
      });
    },
    handleDownload(row) {
      this.$router.push({
        path: "/player",
        query: {},
      });
    },
    handlePlay(row) {
      const data = {
        songId: row.songId,
        userId: localStorage.getItem("userId"),
      };
      //记录用户播放次数
      addHistory(data).then((res) => {
        // console.log("播放次数", res);
      });
      //添加用户的行为信息到本地存储
      const index = localStorage.getItem("index");
      localStorage.removeItem("index");

      const userActionData = JSON.stringify({
        userId: localStorage.getItem("userId"),
        songId: row.songId,
        action: "play",
      });
      localStorage.setItem(parseInt(index) + 1, userActionData);

      //index加一
      localStorage.setItem("index", parseInt(index) + 1);
      const songIds = this.songList.map((item) => item.songId);
      const currentSongIndex = songIds.indexOf(row.songId);
      this.$router.push({
        path: "/player",
        query: { currentSongIndex: currentSongIndex, songIds: songIds },
      });
    },

    // 获取歌手信息
    getSingerInfo(singerId) {
      getSinger(singerId).then((res) => {
        // console.log(res);
        this.singerInfo = res.data;
      });
    },
    // 获取歌曲列表
    getSongListBySingerId(singerId) {
      getSongListBySingerId(singerId).then((res) => {
        console.log(res);
        this.songList = res;
      });
    },
  },
  created() {
    this.getSingerInfo(this.$route.query.singerId);
    this.getSongListBySingerId(this.$route.query.singerId);
  },
};
</script>

<style scoped>
.singer-container {
  padding: 20px;
}

.singer-info {
  display: flex;
  margin-bottom: 40px;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
}

.singer-left {
  margin-right: 30px;
}

.singer-cover {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.singer-right {
  flex: 1;
}

.singer-title {
  font-size: 24px;
  margin-bottom: 15px;
}

.singer-singer,
.singer-date {
  color: #666;
  margin-bottom: 10px;
}

.singer-desc {
  color: #666;
  margin: 20px 0;
  line-height: 1.6;
}

.singer-actions {
  margin-top: 20px;
}

.song-list {
  margin-top: 20px;
}
</style>
